<template>
    <div>
        <el-button-group>
            <el-button @click="on"><i class="fa fa-camera"></i> 启动摄像头</el-button>
            <!-- <el-button @click="off">关闭摄像头</el-button> -->
        </el-button-group>
        <div class="camera_photo">
            <div class="camera">
                <div id="webcam"></div>
                <div class="takePhoto">
                    <el-tooltip content="拍照" placement="top">
                        <a @click="takePhoto" class="fa fa-circle-thin"></a>
                    </el-tooltip>
                </div>
            </div>
            <img v-show="imageUrl" :src="imageUrl" class="img_person" alt="">
        </div>
    </div>
</template>

<script>
require ('@/assets/js/jquery.webcam.js');
import swf from '@/assets/js/jscam_canvas_only.swf';
export default {
    data() {        
        return {
            imageUrl:'',
            imageBlob:null,
        };
    },
    mounted(){
        this.init();
    },
    methods: {
        init(){
            var pos = 0, ctx = null, saveCB, image = [];
            var canvas = document.createElement("canvas");
            canvas.setAttribute('width', 320);
            canvas.setAttribute('height', 240);
            if (canvas.toDataURL) {
                ctx = canvas.getContext("2d");
                image = ctx.getImageData(0, 0, 320, 240);
                var that = this;
                saveCB = function(data){
                    if (canvas.toDataURL) {
                        var col = data.split(";");
                        var img = image;
                        for(var i = 0; i < 320; i++) {
                            var tmp = parseInt(col[i]);
                            img.data[pos + 0] = (tmp >> 16) & 0xff;
                            img.data[pos + 1] = (tmp >> 8) & 0xff;
                            img.data[pos + 2] = tmp & 0xff;
                            img.data[pos + 3] = 0xff;
                            pos+= 4;
                        }
                        if (pos >= 4 * 320 * 240) {
                            ctx.putImageData(img, 0, 0);
                            pos = 0;
                            that.imageUrl = canvas.toDataURL("image/jpeg");
                            that.imageBlob = canvas.toBlob('image/jpeg');
                        }
                    }
                }
            }
            $("#webcam").webcam({
                width: 320,
                height: 240,
                mode: "callback",
                swffile: swf, // canvas only doesn't implement a jpeg encoder, so the file is much smaller

                onTick: function(remain) {

                    if (0 == remain) {
                        $("#status").text("Cheese!");
                    } else {
                        $("#status").text(remain + " seconds remaining...");
                    }
                },

                onSave:  saveCB,
                onCapture: function () {
                    webcam.save();

                // Show a flash for example
                },

                debug: function (type, string) {
                    // Write debug information to console.log() or a div, ...
                    console.log(type,':',string)
                },

                onLoad: function () {
                // Page load
                    var cams = webcam.getCameraList();
                    for(var i in cams) {
                        $("#cams").append("<li>" + cams[i] + "</li>");
                    }
                }
            });
        },
        on(){
            webcam.setCamera(0);
        },
        takePhoto(){     
            webcam.capture();
        },
        clear(){
            if(this.imageUrl){
                this.imageUrl = '';
                this.imageBlob = null;
            }
        }
    }
}
</script>

<style scoped>
.camera_photo{
    display: flex;
    justify-content: space-between;
    width: 700px;
    margin-top: 10px;
}
.camera{
    height: 285px;
    width: 320px;
}
#my_camera,#video,#webcam{
    background: rgba(2, 11, 20, 0.94);
    height: 240px;
    width: 320px;
    margin-bottom:  -5px;
}
.takePhoto{
    height: 45px;
    background: black;
    font-size: 30px;
    text-align: center
}
.takePhoto a{
    color: #fff;
    cursor:pointer;
}
.img_person{
    width: 320px;
    height: 280px;
    border: 22px solid black;
    border-right:none;
    border-left:none; 
}
</style>